<template>
	<view class="intro">
		<view class="font14 title">我的简介</view>
		<view class="introBox">
			<textarea class="font14" maxlength="50" v-model.trim="intro" id="" cols="30" rows="10" placeholder="记得填写简介哦" placeholder-class="font14 color666"></textarea>
			<text class="font12 color999">{{intro.length}}/50</text>
		</view>
		<view class="font12 color999">简介最多只能输入50个字哦~</view>
		<view class="noWidthBtn font14" @click="save">保存</view>
	</view>
</template>

<script>
	import { editMyInfo } from "@/api/mine.js"
	export default {
		data() {
			return {
				intro:''
			}
		},
		onLoad(option) {
			this.intro=option.intro?option.intro:''
		},
		methods: {
			save(){
				if(!this.intro){
					uni.showToast({
						icon:'none',
						title:'请填写简介！'
					})
					return
				}else if(this.intro.length>50){
					uni.showToast({
						icon:'none',
						title:'简介不能超过50个字符！'
					})
					return
				}
				uni.showLoading({
					title:'保存中',
					mask:true
				})
				editMyInfo({introduction:this.intro}).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						uni.showToast({
							icon:'none',
							title:'修改成功'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1200)
					}
				}).catch((err)=>{uni.hideLoading()})
			}
		}
	}
</script>

<style scoped lang="scss">
@import "@/static/public.scss";
.intro{
	padding: 30rpx;
	box-sizing: border-box;
	.title{
		margin: 0 0 30rpx;
	}
	.introBox{
		position: relative;
		textarea{
			width:100%;
			border-radius: 10rpx;
			background:$pageBgColor;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
		}
		text{
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
		}
	}
	.noWidthBtn{
		width: 200rpx;
		margin: 100rpx auto 0;
	}
}

</style>
